<template>
    <div class="head-item">
        <van-image
            v-if="data.icon"
            width="40"
            height="40"
            :src="Utils.getLocalImageSrc(data.icon)"
        ></van-image>
        <div class="head-item-label">{{ data.label }}</div>
    </div>
</template>

<script lang="ts" setup>
import { PropType, toRefs, defineProps } from "vue";
import HeadItemModel from "../types/headItem";
import Utils from "../utils/utils";

const props = defineProps({
    data: {
        type: Object as PropType<HeadItemModel>,
    },
});
const { data } = toRefs(props);
</script>   

<style lang="less" scoped>
.head-item {
    // flex: 1;
    width: 45px; //设置一个固定宽度，使左右两边不留间距
    display: flex;
    flex-direction: column;
    align-items: center;

    .head-item-label {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 6px;
        text-align: center;
    }
}
</style>
